<!DOCTYPE html>
<html>
<head>
    <title>Login and Sign Up</title>
    <link rel="stylesheet" href="css/loginAndSingup.css" type="text/css">
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
    <script>
        $(document).ready(function () {

            /*--usable place start--*/


            $(".switchButtonOuter").bind("click", function () {
                $(this).parents(".loginOrSignupField").toggleClass("signup_ON");

                setTimeout(function () {

                    if ($(".loginOrSignupField").hasClass("signup_ON")) {
                        $("#submit").attr("value", "Sign up");
                    } else {
                        $("#submit").attr("value", "Join");
                    }

                    $("#email,#submit,.socialButton.twitter")
                            .animate({
                                "left": "-10px"
                            }, 50)
                            .animate({
                                "left": "10px"
                            }, 50)
                            .animate({
                                "left": "-5px"
                            }, 50)
                            .animate({
                                "left": "5px"
                            }, 50)
                            .animate({
                                "left": "0"
                            }, 50);
                    $("#password,.socialButton.facebook,.socialButton.googleplus")
                            .animate({
                                "left": "10px"
                            }, 50)
                            .animate({
                                "left": "-10px"
                            }, 50)
                            .animate({
                                "left": "5px"
                            }, 50)
                            .animate({
                                "left": "-5px"
                            }, 50)
                            .animate({
                                "left": "0"
                            }, 50);

                    if ($(".loginOrSignupField").hasClass("signup_ON")) {
                        $("#rememberMeField").css("display", "none");
                    } else {
                        $("#rememberMeField").css("display", "block");
                    }

                }, 200);

            });


            $("#submit").bind("mouseover", function () {
                if ($("#email").val() == "") {
                    $("#email")
                            .animate({
                                "left": "-10px"
                            }, 50)
                            .animate({
                                "left": "10px"
                            }, 50)
                            .animate({
                                "left": "-5px"
                            }, 50)
                            .animate({
                                "left": "5px"
                            }, 50)
                            .animate({
                                "left": "0"
                            }, 50);
                }
                if ($("#password").val() == "") {
                    $("#password")
                            .animate({
                                "left": "10px"
                            }, 50)
                            .animate({
                                "left": "-10px"
                            }, 50)
                            .animate({
                                "left": "5px"
                            }, 50)
                            .animate({
                                "left": "-5px"
                            }, 50)
                            .animate({
                                "left": "0"
                            }, 50);
                }
            });


            setTimeout(function () {

                $(".loginOrSignupField").css({
                    "opacity": "1",
                    "-webkit-transform": "translateY(-50%) translateX(-50%) scale(1.008)",
                    "-moz-transform": "translateY(-50%) translateX(-50%) scale(1.008)",
                    "-ms-transform": "translateY(-50%) translateX(-50%) scale(1.008)",
                    "-o-transform": "translateY(-50%) translateX(-50%) scale(1.008)",
                    "transform": "translateY(-50%) translateX(-50%) scale(1.008)"
                });

            }, 500);


            /*--usable place end--*/



            $(".normal,.mode01,.mode02").on("click", function () {
                if ($(this).is(".normal")) {
                    $("body").removeClass("mode01_ON mode02_ON");
                } else if ($(this).is(".mode01")) {
                    $("body").removeClass("mode02_ON").addClass("mode01_ON");
                } else if ($(this).is(".mode02")) {
                    $("body").removeClass("mode01_ON").addClass("mode02_ON");
                }
            });









        });
    </script>
</head>
<body>
<section class="loginOrSignupField anim03 anim04c">
    <aside class="loginOrSignupFieldInner anim03 anim04c">

        <div class="switchButtonField">
            <div class="switchButtonOuter">
                <div class="switchButtonInner anim03 anim04c"></div>
            </div>
        </div>

        <form class="emailForm" method="post" action="musabProje">
            <input type="text" id="email" class="input" value="" placeholder="E-mail">
            <input type="password" id="password" class="input" value="" placeholder="Password">
            <div id="rememberMeField">
                <label>
                    <input type="checkbox" id="rememberMe">
                    <span></span>
                </label>
            </div>
            <input type="submit" id="submit" value="Join">
        </form>

        <a href="#" class="socialButton facebook" target="_blank">Facebook</a>
        <a href="#" class="socialButton twitter" target="_blank">Twitter</a>
        <a href="#" class="socialButton googleplus" target="_blank">Google +</a>

    </aside>

    <nav class="navigations">
        <ul>
            <li>
                <span class="normal">normal</span>
            </li>
            <li>
                <span class="mode01">mode 2</span>
            </li>
            <li>
                <span class="mode02">mode 3</span>
            </li>
            <li class="designer">
                <a href="https://creativemarket.com/mselmany" target="_blank">
                    <img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash2/t5/1117447_100001638983788_1284464661_q.jpg" alt="">
                </a>
            </li>
        </ul>
    </nav>
</section>
</body>
</html>